<template>
  <div class="enterpriseName-check setting-content section-container">
    <h2 class="setting-header">
      <strong>
        <span>账号管理</span>
      </strong>
    </h2>
    <div class="section-description">
      <i class="iconfont">&#xe60e;</i>
      <p>主账号是一个账户系统的顶级账户，拥有最高级别的权限和控制权。子账号是从属于主账号的次级账户，通常具有有限的权限和特定的功能。子账号的权限由主账号分配和管理。</p>
    </div>
    <div class="list-container">
      <SearchCmp style="margin: 10px 0;" v-if="searchCmpArray.length" :searchCmpArray="searchCmpArray" :searchForm="queryData" @onSubmit="handleSearch" />
      <RuifoxTable :loading="tableLoading" :default-index="true" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #username="{element}">
          <span type="success">
            {{element.username}}
            <el-tag v-if="!element.pid" type="primary">主账号</el-tag>
          </span>
        </template>
        <!-- <template #blockState="{element}">
          <el-tag type="success" v-if="element.blockState == 1">正常</el-tag>
          <el-tag type="info" v-if="element.blockState == 2">已拉黑</el-tag>
        </template> -->
        <template #forbidState="{element}">
          <el-tag type="success" v-if="element.forbidState == 0">正常</el-tag>
          <el-tag type="danger" v-if="element.forbidState == 1">已禁用</el-tag>
        </template>

        <template #options="{element}">
          <div class="table-td-option unmover">
            <el-button type="primary" link @click="handleCheck(element,1)">查看</el-button>
            <el-button type="primary" v-if="element.forbidState == 0" link @click="handleVendorEdit('state', 1, element)">禁用</el-button>
            <el-button type="primary" v-if="element.forbidState == 1" link @click="handleVendorEdit('state', 0, element)">启用</el-button>
          </div>
        </template>
      </RuifoxTable>

      <PaginationView :total="queryData.total" :pageSize="queryData.pageSize" :currentPage="queryData.currentPage" :allChoose="isAllChooseBtn" :pageChoose="isPageChooseBtn" :checkedNum="checkedNum" @changeSize="handleSizeChange" @currentChange="handleCurrentChange" @changePageChoose="handlePageChoose" @changeAllChoose="handleAllChoose" @invertChoose="handleInvertChoose" @refreshList="getTableData" />
    </div>
    <el-dialog v-model="fileDialog" title="资质证件" width="500px">
      <div>
        <div class="table-img">
          <el-image style="width: 100px; height: 100px" :src="curFile.licenseUrl ? curFile.licenseUrl + fileSecretKey : ''" :preview-src-list="[curFile.licenseUrl + fileSecretKey]" :zoom-rate="1.2" :initial-index="4" fit="cover" />
        </div>
      </div>
    </el-dialog>
    <el-drawer v-model="detailsDrawer" title="会员信息概览" size="800px">
      <supplierDetails v-if="detailsDrawer" :curRow="curRow" :curBtnType="curBtnType" />
      <template #footer>
        <div style="flex: auto">
          <template v-if="curBtnType == 2">
            <el-button v-if="curRow.forbidState == 0" type="danger" @click="handleVendorEdit('state', 1, curRow)">禁用</el-button>
            <el-button v-else type @click="handleVendorEdit('state', 0, curRow)">启用</el-button>
          </template>
          <el-button @click="detailsDrawer = false">取消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { userSelectPage, updateUserState } from '@/api/bidding'
// import { fileSecretKey } from '@/views/formSystem/formDesign/config/formCmpConfig.js'
const fileSecretKey = ''
import { tableList as mixTable } from '@ruifox-cms/utils'
import supplierDetails from '@/views/bidding/supplierManage/components/supplierDetails.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const {
  queryData,
  tableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  getTableData,
  handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
} = mixTable({
  getListApi: userSelectPage,
  batchFuncTip: '是否确定删除选中项？',
})
onMounted(() => {
  handleSearch()
})
const defaultQueryData = {
  keyWords: '',
  blockState: null, //-1全部 1正常 2拉黑
  forbidState: null, //-1全部 0已启用 1禁用
  pid: 0, //用于查同企业账号列表
}
Object.assign(queryData, structuredClone(defaultQueryData))
if(route.query.creditCode) queryData.keyWords = route.query.creditCode;
const fieldList = ref([
  // {
  //   title: '会员账号',
  //   name: 'vipAccount',
  // },
  {
    title: '会员名称',
    name: 'username',
  },
  {
    title: '供应商全称',
    name: 'enterpriseName',
  },
  {
    title: '法定代表人',
    name: 'legalRepresentative',
  },
  // {
  //   title: '拉黑状态',
  //   name: 'blockState',
  // },
  {
    title: '是否禁用',
    name: 'forbidState',
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options',
  },
])
const detailsDrawer = ref(false)
const curRow = ref({})
const curBtnType = ref(1) //1 查看 2 审核 3 拉黑

//查看 审核 拉黑
const handleCheck = (ele, type) => {
  curRow.value = ele
  curBtnType.value = type
  detailsDrawer.value = true
}

const curFile = ref({})
const fileDialog = ref(false)
const banOptions = ref([
  { label: '全部', value: -1 },
  { label: '已启用', value: 0 },
  { label: '已禁用', value: 1 },
])
const blackOptions = ref([
  { label: '全部', value: -1 },
  { label: '正常', value: 1 },
  { label: '已拉黑', value: 2 },
])
const searchCmpArray = ref([
  { label: '关键词', key: 'keyWords' },
  { label: '禁用状态', key: 'forbidState', form_type: 'select', options: banOptions.value },
  { label: '拉黑状态', key: 'blockState', form_type: 'select', options: blackOptions.value },
])
const handleVendorEdit = (field, val, row) => {
  let msg = '是否确认禁用？'
  if (row.isMainAccount == 1) {
    msg = '主账号禁用会禁用掉所有子账号！是否确认操作？'
  }
  ElMessageBox.confirm(`<div><p style="font-size: 16px;margin-bottom: 15px;">${msg}</p></div>`, '操作确认', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    let res = await updateUserState({ userId: row.id, [field]: val })
    if (res.code == 20000) {
      ElMessage({
        showClose: true,
        message: '操作成功',
        type: 'success',
      })
      handleSearch()
    }
  })
}
</script>
<style lang="scss" scoped>
header {
  margin-bottom: 20px;
  overflow: hidden;
  .left-btn {
    float: left;
    display: flex;
    align-items: center;
  }
  .right-btn {
    float: right;
    display: flex;
    align-items: center;
    .keyWords-search {
      width: 320px;
      margin-right: 20px;
      i {
        cursor: pointer;
        color: $mainColor;
      }
    }
    .el-btn2 {
      .search-icon {
        color: $mainColor;
      }
      span {
        margin-left: 5px;
        color: $black;
      }
      .active-focus {
        color: $mainColor;
      }
    }
    .el-btn1 {
      width: 111px;
      height: 32px;
      .tuo-icon {
        color: $mainColor;
        font-size: 16px;
      }
      span {
        margin-left: 5px;
        color: $black;
      }
      .active-focus {
        color: $mainColor;
      }
    }
    .change-card {
      height: 32px;
      width: 64px;
      box-sizing: border-box;
      border: var(--el-border);
      border-radius: 4px;
      display: flex;
      overflow: hidden;
      margin-left: 20px;
      a {
        display: flex;
        width: 50%;
        height: 100%;
        align-items: center;
        justify-content: center;
      }
      a.active {
        background-color: $mainColor;
        i {
          color: #fff;
        }
      }
    }
  }
}
.ruifox-table tbody tr {
  cursor: auto;
  td {
    p {
      @include textEllipsis(16px, 1);
    }
    a {
      color: $mainColor;
      @include textEllipsis(16px, 1);
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>